<template>
  <div>
  <div class="mapRackWrap">
    <div class="containerWrap" ref="mapScreenfull">
      <div class="infoButton">
        <i @click='getHotMapInfo()' class="iconfont icon-shuaxin leftIcon"></i>
        <!--<i @click='screenfullMap' class="iconfont icon-quanping"></i>-->
      </div>

      <div class="imgNotice" >
        <div style="line-height: 20px;"><img class="logoImg2" style="height:20px;vertical-align: middle;" src="./images/site.png" alt="logo"><span style="vertical-align: middle;margin-left: 5px;display: inline-block;line-height: 20px;">站点:</span><span class="font" style="vertical-align: top;;display: inline-block;color: #2d6dcc;font-weight: bold;">({{siteCount}})</span></div>
        <div style="line-height: 20px;"><img class="logoImg2" style="height:20px;vertical-align: middle;" src="./images/rail.png" alt="logo"><span style="vertical-align: middle;margin-left: 5px;display: inline-block;line-height: 20px;">围栏:</span><span class="font" style="vertical-align: top;;display: inline-block;color: #2d6dcc;font-weight: bold;">({{urgentCount}})</span></div>
      </div>
      <div id="container"></div>
    </div>
    <el-dialog :close-on-click-modal="false"
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="40%"
    >
      <el-row >
        <el-col :span="4" ><img src="./images/isPark.png" height="58" width="54"/></el-col>
        <el-col :span="4" ><img src="./images/isPark.png" height="58" width="54"/></el-col>
        <el-col :span="4" ><img src="./images/nopark.png" style="margin-top: 20px;margin-left: 10px;" height="32" width="30"/></el-col>
        <el-col :span="4" ><img src="./images/nopark.png" style="margin-top: 20px;margin-left: 10px;" height="32" width="30"/></el-col>
        <el-col :span="4" ><img src="./images/isPark.png" height="58" width="54"/></el-col>
        <el-col :span="4" ><img src="./images/isPark.png" height="58" width="54"/></el-col>
        <el-col :span="4" ><img src="./images/isPark.png" height="58" width="54"/></el-col>
        <el-col :span="4" ><img src="./images/isPark.png" height="58" width="54"/></el-col>
        <el-col :span="4" ><img src="./images/nopark.png" style="margin-top: 20px;margin-left: 10px;" height="32" width="30"/></el-col>
        <el-col :span="4" ><img src="./images/nopark.png" style="margin-top: 20px;margin-left: 10px;" height="32" width="30"/></el-col>
        <el-col :span="4" ><img src="./images/isPark.png" height="58" width="54"/></el-col>
        <el-col :span="4" ><img src="./images/isPark.png" height="58" width="54"/></el-col>
        <el-col :span="4" ><img src="./images/isPark.png" height="58" width="54"/></el-col>
        <el-col :span="4" ><img src="./images/isPark.png" height="58" width="54"/></el-col>
        <el-col :span="4" ><img src="./images/isPark.png" height="58" width="54"/></el-col>
        <el-col :span="4" ><img src="./images/nopark.png" style="margin-top: 20px;margin-left: 10px;" height="32" width="30"/></el-col>
        <el-col :span="4" ><img src="./images/nopark.png" style="margin-top: 20px;margin-left: 10px;" height="32" width="30"/></el-col>
        <el-col :span="4" ><img src="./images/nopark.png" style="margin-top: 20px;margin-left: 10px;" height="32" width="30"/></el-col>
      </el-row>
      <div style="text-align: center;margin-top: 20px;" class="dialog-footer">
        <el-button type="primary" size="mini" @click="dialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>

  </div>
</template>

<script>
  import split from "../../split/split.vue"



  export default {
    props:["railInfo","siteInfo","siteCount","urgentCount"],
    data () {
      return {
        map: "",
        dialogTitle: "",
        dialogVisible: false,
        markers: [],
        currId: [],
      }
    },
    mounted(){

      document.querySelector(".mapRackWrap").style.height=document.querySelector(".moveControlWrap").clientHeight-85+"px"
      window.onresize = () => {
        if(document.querySelector(".mapRackWrap")){
          document.querySelector(".mapRackWrap").style.height=document.querySelector(".moveControlWrap").clientHeight-85+"px"
        }

      }
      this.getHotMap()
    },
    destroyed(){
      window.onresize =null

    },

    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      getHotMapInfo(){
        this.$emit("getMapInfo")
      },
      screenfullMap(){
        if (this.screenfull.enabled) {
          this.screenfull.toggle(this.$refs.mapScreenfull);
          setTimeout(()=>{
            this.getHotMap();
          },100)
          setTimeout(()=>{
            this.getHotMap();
          },1000)
        }

      },
      getHotMap(){

        let _this = this

        _this.map = new BMap.Map("container",{
          enableMapClick: false,
          minZoom: 10,
          maxZoom: 19
        });          // 创建地图实例
        _this.map.centerAndZoom(new BMap.Point(114.03533, 22.615409), 11);             // 初始化地图，设置中心点坐标和地图级别
        _this.map.enableScrollWheelZoom(); // 允许滚轮缩放

        _this.map.addControl(new BMap.OverviewMapControl());
        _this.map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件

        _this.addMarkes( _this.siteInfo,1)
        _this.addMarkes( _this.railInfo,0)

      },
      addMarkes(dataInnfo,key){
        let _this=this
        for (var i = 0; i < dataInnfo.length; i++) {
          //设置marker图标为水滴
          if(key==0){//围栏
            var vectorMarker = new BMap.Marker(new BMap.Point(dataInnfo[i].lng, dataInnfo[i].lat), {
              icon: new BMap.Icon(`./static/siteRailImg/rail${dataInnfo[i].state==0?"0":dataInnfo[i].state==1?"1":dataInnfo[i].state==2?"2":dataInnfo[i].state==3?"3":dataInnfo[i].state==5?"5":""}.png`,  new BMap.Size(20,20)

              )
            });
            if(dataInnfo[i].position&&dataInnfo[i].position.length>2){
              var arr=[]
              dataInnfo[i].position.forEach((item)=>{
                arr.push(new BMap.Point(item.lng,item.lat))
              })
              _this.polygon = new BMap.Polygon(arr, {
                strokeColor: "#2D6DCC",    //边线颜色。
                fillColor: "#7EB1FC",      //填充颜色。当参数为空时，圆形将没有填充效果。
                strokeWeight: 1,       //边线的宽度，以像素为单位。
                strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。
                fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
                strokeStyle: 'solid' //边线的样式，solid或dashed。
              });  //创建多边形
              this.map.addOverlay(_this.polygon);           //增加多边形
            }
//            console.log(dataInnfo[i].position)
          }else if(key==1) {//站点
            var vectorMarker = new BMap.Marker(new BMap.Point(dataInnfo[i].lng, dataInnfo[i].lat), {
              // 指定Marker的icon属性为Symbol
              icon: new BMap.Icon(`./static/siteRailImg/site${dataInnfo[i].state==0?"0":dataInnfo[i].state==1?"1":dataInnfo[i].state==2?"2":dataInnfo[i].state==3?"3":dataInnfo[i].state==5?"5":""}.png`,  new BMap.Size(20,20)

              )
            });
          }

          var label = new BMap.Label("["+dataInnfo[i].id+','+dataInnfo[i].isSite+"]",{offset:new BMap.Size(20,-10)});
          label.setStyle({color:"red",opacity:0})
          _this.markers.push(vectorMarker);
          _this.map.addOverlay(vectorMarker);
          vectorMarker.setLabel(label);
          vectorMarker.setShadow(vectorMarker)


          _this.addClickHandler(vectorMarker);
        }
      },
      deviceAddListener(){
        let _this=this,data={}
        let arr=_this.currId[1]==0?_this.railInfo: _this.siteInfo
        arr.forEach(item=>{
          if(item.id==_this.currId[0]){
            data=item
          }
        })
       document.getElementById( _this.currId[0]).addEventListener("click",()=>{
         this.dialogVisible=true
       },false);
      },
      addClickHandler (marker) {
        let _this = this
        marker.addEventListener("click", function (e) {
            let arr =  JSON.parse(this.getLabel().content)
           _this.currId=arr
            let Mapurl = process.env.API_HOST + `ulinkUrgentArea/getInfo?${arr[1]==0?"urgentId":"siteId"}=${arr[0]}`
            this.axios.get(Mapurl, {withCredentials: true})
              .then(response => {
                const result = response.data
                if (result.state === 0) {
                  var p = e.target;
                  var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
//                  _this.dialogTitle=arr[1]==0?result.data.areaName+"停车详情": result.data.siteName+"停车详情"
                  let content,name

                  //创建检索信息窗口对象
                  this.searchInfoWindow = null;
                  if(arr[1]==0){
                    name=result.data.areaName
                    content = '<div style="margin:0;line-height:25px;padding-left: 10px;font-size: 14px;">' +
                      '<div style="float:right;zoom:1;overflow:hidden;width:50px;line-height:55px;margin-left:3px;"><img id='+arr[0]+' src="./static/siteRailImg/rail.png" alt=""  style="width:38px;height:38px;cursor: pointer;vertical-align: middle;"/></div>' +
                      '围栏容量：'+result.data.allowCount+'<br/>停车数量：'+result.data.parkingCount+'<br/>' +
                      '</div>';

                  }else {
                    name=result.data.siteName
                    content = '<div style="margin:0;line-height:25px;padding-left: 10px;font-size: 14px;">' +
                      '<div style="float:right;zoom:1;overflow:hidden;width:50px;line-height:55px;margin-left:3px;"><img id='+arr[0]+' src="./static/siteRailImg/site.png" alt="" style="width:32px;height:40px;cursor: pointer;vertical-align: middle;"/></div>' +
                      '车桩数量：'+result.data.rackTotal+'<br/>停车数量：'+result.data.parkingCount+'<br/>' +
                      '</div>';
                  }
                  this.searchInfoWindow = new BMapLib.SearchInfoWindow(this.map, content, {
                    title  : name,      //标题
                    width  : 80,             //宽度
                    height : 60,              //高度
                    panel  : "panel",         //检索结果面板
                    enableAutoPan : true,     //自动平移
                    offset:new BMap.Size(-20,-20),
                    searchTypes   :[
                      /*BMAPLIB_TAB_SEARCH,   //周边检索
                      BMAPLIB_TAB_TO_HERE,  //到这里去
                      BMAPLIB_TAB_FROM_HERE //从这里出发*/
                    ]
                  });
                  this.marker = new BMap.Marker(point); //创建marker对象
                  this.searchInfoWindow.open(this.marker)
                  setTimeout(()=>{
                    _this.deviceAddListener()
                  },0)

                 /* if(arr[1]==0){
                    var infoWindow = new BMap.InfoWindow( "<div style='background-color: #eee;box-shadow: 3px 3px 3px #eee;'>" +
                      "<div style='margin:0 0 5px 0;padding:0.2em 0'>围栏名: "+result.data.areaName+"</div>" +
                      "<div style='margin:0 0 5px 0;padding:0.2em 0'>围栏容量: "+result.data.allowCount+"</div>" +
                      "<div style='margin:0 0 5px 0;padding:0.2em 0'>停车数: "+result.data.parkingCount+"</div>" +
                      "</div>",{
                      offset:new BMap.Size(0,-5),
                    });  // 创建信息窗口对象
                  }else {
                    var infoWindow = new BMap.InfoWindow( "<div style='background-color: #eee;box-shadow: 3px 3px 3px #eee;'>" +
                      "<div style='margin:0 0 5px 0;padding:0.2em 0'>站点名: "+result.data.siteName+"</div>" +
                      "<div style='margin:0 0 5px 0;padding:0.2em 0'>车桩数: "+result.data.rackTotal+"</div>" +
                      "<div style='margin:0 0 5px 0;padding:0.2em 0'>停车数: "+result.data.parkingCount+"</div>" +
                      "</div>",{
                      offset:new BMap.Size(0,-5),
                    });  // 创建信息窗口对象
                  }

                  _this.map.openInfoWindow(infoWindow, point); //开启信息窗口*/
                }
              })
          }
        )
      }


    },
    watch:{
      siteInfo(){
        this.getHotMap()
      },
      railInfo(){
        this.getHotMap()
      },

    }

  }
</script>

<style lang="stylus" rel="stylesheet/stylus" >
  @import "../../../common/stylus/mixin.styl"
  .mapRackWrap
    width: 98%;
    margin 0 auto;
    .el-dialog__body
      padding 20px!important


  #container {
    height: 100%;
    width: 100%;
  }



  .containerWrap {
    height: 100%;
    width: 100%;
    margin 10px auto;
    position: relative;
  }

  .colorWrap {
    position: absolute;
    right  10px;
    top: 20px;
    padding 10px;
    border-radius 5px
    z-index: 5;
    color: black;
    margin-left: 60px;
    margin-top 10px;
    background-color rgba(255,255,255,0.8)
  }
  .imgNotice{
    background-color rgba(255,255,255,0.8)
    position: absolute;
    left   55px;
    top: 10px;
    padding 5px 10px 0 5px;
    border-radius 5px
    z-index: 5;
    color: black;
    font-size 14px
  }

  .colorlist {
    display: inline-block;
    width: 10px;
    height 10px;
    line-height 25px
    border-radius: 50%;
    background-color: red;
    margin-right: 3px;
  }

  #r-result {
    width: 100%;
  }



  .mapRackWrap:hover .infoButton {
    opacity: 1;
  }

  .infoButton {
    width 60px
    height 20px
    font-size: 16px;
    color: darkgreen;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index 5
    opacity: 0;

  }

  .map {
    font-size: 25px;
    margin 0 auto;
    display: inline-block;
    width 100%;
    height: 100%;
    text-align: center;
    font-weight: bold;
  }

  .infoButton .iconfont {

    display: inline-block;
    font-size: 20px;
    cursor pointer
  }

  .leftIcon {
    margin-right: 10px !important;
  }

  .BMapLib_bubble_title{
    padding-left: 14px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    background-color white
    border-radius 10px !important
  }
  .BMapLib_bubble_top,.BMapLib_bubble_close{
    border-radius 10px !important
    border none
  }

  #BMapLib_SearchInfoWindow0,.BMapLib_SearchInfoWindow{
    border-radius 10px !important
    width 220px !important
    box-shadow:0px 0px 24px 0px rgba(0, 0, 0, 0.34) !important
    border none
  }


</style>
